<!-- !英文叹号
html
-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="author" content="wangbo">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: aqua;
      /*transition 过渡, 变化的属性,变化所需要的时间,变化的速度曲线,拖延几秒
      所有的属性都发生变化 */
      transition: all 3s linear 2s;
       /* 单独是属性 */
      transition-property: all;
      /*  过渡的时间 */
      transition-duration: 3s;
      /* delay 延迟,几秒之后再发生 */
      transition-delay: 5s;
      /* 速度曲线 linear匀速, ease 减速 ease-in 先加速 ease-out先匀速,在减速,
      ease-in-out 先加速再减速
       */
      transition-timing-function: ease-in-out;
     
    }

    /* 伪类选择器, 某种状态的选择器 */
    div:hover {
      width: 400px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div>

  </div>
</body>

</html>